<template>
  <div class="museum-info-container">
    <div class="museum-header">
      <h1 class="page-title">博物馆介绍</h1>
      <p class="page-subtitle">传承文明，守护历史，启迪未来</p>
    </div>

    <div class="museum-content">
      <div class="intro-section">
        <img src="@/assets/images/museum.png" alt="博物馆外观" class="intro-image" />
        <div class="intro-text">
          <p>
            博物馆创建于1950年，是国家一级博物馆，馆藏文物超过10万件，包括陶瓷、青铜、玉器、书画等多个门类。
            博物馆建筑面积5万平方米，常设展览20个，每年接待观众超过200万人次。
            博物馆致力于文物保护、研究和展示，为公众提供优质的文化服务。
          </p>
          <el-button type="primary" class="learn-more-btn" @click="goToExhibits">
            浏览展览
            <el-icon class="ml-5"><ArrowRight /></el-icon>
          </el-button>
        </div>
      </div>

      <div class="stats-section">
        <div class="stat-item">
          <h3>100,000+</h3>
          <p>馆藏文物</p>
        </div>
        <div class="stat-item">
          <h3>20+</h3>
          <p>常设展览</p>
        </div>
        <div class="stat-item">
          <h3>2,000,000+</h3>
          <p>年访问量</p>
        </div>
      </div>

      <div class="highlights-section">
        <h2>博物馆亮点</h2>
        <div class="divider"></div>
        <el-row :gutter="20">
          <el-col :xs="24" :sm="12" :md="8" v-for="highlight in highlights" :key="highlight.title">
            <el-card shadow="hover" class="highlight-card">
              <div class="highlight-info">
                <h3>{{ highlight.title }}</h3>
                <p>{{ highlight.description }}</p>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ArrowRight } from '@element-plus/icons-vue'

const highlights = ref([
  {
    title: '现代化展厅',
    description: '运用现代科技，带来沉浸式的观展体验。',
    imageUrl: '/src/assets/images/highlight1.jpg'
  },
  {
    title: '丰富的馆藏',
    description: '馆藏文物种类繁多，涵盖多个历史时期。',
    imageUrl: '/src/assets/images/highlight2.jpg'
  },
  {
    title: '互动体验',
    description: '提供多种互动体验，适合各年龄段观众。',
    imageUrl: '/src/assets/images/highlight3.jpg'
  }
])

const goToExhibits = () => {
  // 跳转到展览页面
}
</script>

<style scoped>
.museum-info-container {
  padding: 40px 24px;
  max-width: 1280px;
  margin: 0 auto;
}

.museum-header {
  text-align: center;
  margin-bottom: 40px;
}

.page-title {
  font-size: 36px;
  color: #2c3e50;
  margin-bottom: 12px;
}

.page-subtitle {
  color: #606266;
  font-size: 18px;
}

.museum-content {
  background: #f8f9fa;
  border-radius: 16px;
  padding: 40px;
}

.intro-section {
  display: flex;
  gap: 40px;
  align-items: center;
  margin-bottom: 40px;
}

.intro-image {
  width: 50%;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.intro-text {
  flex: 1;
}

.intro-text p {
  font-size: 16px;
  line-height: 1.8;
  color: #4a4a4a;
  margin-bottom: 24px;
}

.learn-more-btn {
  font-size: 16px;
}

.stats-section {
  display: flex;
  justify-content: space-around;
  margin-bottom: 40px;
}

.stat-item {
  text-align: center;
}

.stat-item h3 {
  font-size: 28px;
  color: #409EFF;
  margin-bottom: 8px;
}

.stat-item p {
  color: #666;
}

.highlights-section {
  text-align: center;
  margin-bottom: 40px;
}

.highlights-section h2 {
  font-size: 28px;
  color: #2c3e50;
  margin-bottom: 16px;
}

.divider {
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, #409EFF, #67C23A);
  margin: 0 auto 40px;
  border-radius: 2px;
}

.highlight-card {
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s;
}

.highlight-card:hover {
  transform: translateY(-8px);
}

.highlight-image {
  width: 100%;
  height: 160px;
  object-fit: cover;
}

.highlight-info {
  padding: 16px;
}

.highlight-info h3 {
  font-size: 18px;
  color: #2c3e50;
  margin-bottom: 8px;
}

.highlight-info p {
  color: #666;
  font-size: 14px;
  line-height: 1.6;
}

.qr-section {
  text-align: center;
  margin-top: 40px;
}

.qr-codes {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-top: 20px;
}

.qr-item {
  text-align: center;
}

.qr-placeholder {
  width: 150px;
  height: 150px;
  background: #e0e0e0;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #666;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
  .intro-section {
    flex-direction: column;
  }

  .intro-image {
    width: 100%;
  }

  .qr-codes {
    flex-direction: column;
    gap: 20px;
  }
}
</style> 